<template>
  <el-table
      :data="processedTableData"
      border
      height="300"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="date"
        label="日期"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名">
    </el-table-column>
    <el-table-column
        prop="amount"
        label="金额">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '商品1', amount: 100 },
        { date: '2023-01-02', name: '商品2', amount: 200 },
        { date: '2023-01-03', name: '商品3', amount: 300 },
        { date: '2023-01-03', name: '商品3', amount: 300 },
        { date: '2023-01-03', name: '商品3', amount: 300 },
        { date: '2023-01-03', name: '商品3', amount: 300 },
        { date: '2023-01-03', name: '商品3', amount: 300 },
      ]
    }
  },
  computed: {
    processedTableData() {
      const totalAmount = this.tableData.reduce((sum, item) => sum + item.amount, 0)
      return [
        ...this.tableData,
        { date: '总计1', name: '', amount: totalAmount, isTotal: true },
        { date: '总计2', name: '', amount: totalAmount * 1.5, isTotal: true }
      ]
    }
  },
  methods: {
    tableRowClassName({ row }) {
      if (row.isTotal) {
        return 'total-row'
      }
      return ''
    }
  }
}
</script>

<style>
.el-table .total-row {
  background-color: #f0f9eb;
  font-weight: bold;
}
</style>